<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 子孙后代选择器 */
        /*body div div p{
            color: red;
        }*/
        /* 子元素选择器 */
        div>div>p{
            color: blue;
        }
        /* 为类选择器 */
        a:link{color: red} /* 未访问状态 */
        a:visited{color: green} /* 访问过状态 */
        a:hover{color: yellow} /* 悬停状态 */
        a:active{color: pink} /* 点击状态 */
    </style>
</head>
<body>

    <a href="https://www.tmooc.cn/">超链接1</a>
    <a href="https://pvp.qq.com/">超链接2</a>
    <a href="https://www.baidu.com/">超链接3</a>

    <p>p1</p>
    <div>
        <p>p2</p>
        <div><p>p3</p></div>
        <div>
            <p>p4</p>
            <div><p>p5</p></div>
        </div>
    </div>
</body>
</html>